<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>apple(中国)官方网站</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/common.js"></script>
</head>

<body>
    <div class="up_nav">
        <div class="container" style="line-height:40px;">
            <广告>
        </div>
    </div>
    
    <div class="nav">
        <div class="container">
            <ul class="nav_ul">
                <li><a class="iconfont icon-pingguo icon_color_white" href="index.html"></a></li>
                <li><a class="icon_color_white" href="Mac.html">Mac</a></li>
                <li><a class="icon_color_white" href="iPad.html">iPad</a></li>
                <li><a class="icon_color_white" href="iPhone.html">iPhone</a></li>
                <li><a class="icon_color_white" href="Watch.html">Watch</a></li>
                <li><a class="icon_color_white" href="Music.html">Music</a></li>
                <li><a class="icon_color_white" href="#">技术支持</a></li>
                <li><a class="iconfont icon-sousuo icon_color_white" href="#"></a></li>
                <li><a class="iconfont icon-gouwudai icon_color_white" href="#"></a></li>
            </ul>
        </div>
    </div><!-- 导航结束 -->

    <!-- 轮播开始 -->
    <div class="silder" style="overflow:hidden">
        <ul class="silder_ul1">
            <li class="ul1_bg1" style="display:block">
                <div class="bg1_font"><h2>iPhone</h2><h1>7，在此。</h1></div>
            </li>
            <li class="ul1_bg2">
                <div class="bg2_font">
                    <p>
                    <b style="font-size: 2.143rem;"><span class="iconfont icon-pingguo" style="font-size: 2rem;"></span>WATCH</b>
                    </p>
                    <p>
                        SERIES 2
                    </p>
                </div>
                <div class="bg2_font2">
                    Series 2 新登场。
                </div>
            </li>
            <li class="ul1_bg3">
                <div class="bg1_font"><h2>MacBook Pro</h2><h1>一身才华，一触，即发。</h1></div>
            </li>
        </ul>
        <ul class="silder_ul2">
            <li><p></p></li>
            <li><p></p></li>
            <li><p></p></li>
        </ul>
    </div>
    <!-- 轮播结束 -->
    

    <div class="row_under" style="overflow:hidden">
        <div class="row">
            <div class="col-lg-3" style="padding:0;border:2px solid #fff"><img src="images/row_1.jpg" style="width:100%;max-width:100%;" alt=""></div>
            <div class="col-lg-3" style="padding:0;border:2px solid #fff"><img src="images/row_2.jpg" style="width:100%;max-width:100%;" alt=""></div>
            <div class="col-lg-3" style="padding:0;border:2px solid #fff"><img src="images/row_3.jpg" style="width:100%;max-width:100%;" alt=""></div>
            <div class="col-lg-3" style="padding:0;border:2px solid #fff"><img src="images/row_4.jpg" style="width:100%;max-width:100%;" alt=""></div>
        </div>
    </div>

    <div class="bottom" style="overflow:hidden">
        <div class="container" style="padding:15px 15px;border-bottom:1px solid #888888">
            <div class="row" style="color:#888888">双镜头摄像头仅于 iPhone 7 Plus 提供。亮黑色外观仅于 128GB 及以上存储容量的机型提供。</div>
        </div>
        <div class="container" style="padding:20px 0">
            <ul class="bottom_ul1">
                <li>
                    <p><b>选购及了解</b></p>
                    <ul class="ul_ul">
                        <li><a href="#">Mac</a></li>
                        <li><a href="#">iPad</a></li>
                        <li><a href="#">iPhone</a></li>
                        <li><a href="#">Watch</a></li>
                        <li><a href="#">Music</a></li>
                        <li><a href="#">iTunes</a></li>
                        <li><a href="#">iPod</a></li>
                        <li><a href="#">配件</a></li>
                        <li><a href="#">App Store充值卡</a></li>
                    </ul>    
                </li>
                <li>
                    <p><b>Apple Store 商店</b></p>
                    <ul class="ul_ul">
                       <li><a href="#">Mac</a></li>
                        <li><a href="#">iPad</a></li>
                        <li><a href="#">iPhone</a></li>
                        <li><a href="#">Watch</a></li>
                        <li><a href="#">Music</a></li>
                        <li><a href="#">iTunes</a></li>
                        <li><a href="#">iPod</a></li>
                        <li><a href="#">配件</a></li>
                        <li><a href="#">App Store充值卡</a></li>
                    </ul>    
                </li>
                <li>
                    <p><b>教育应用</b></p>
                    <ul class="ul_ul">
                        <li><a href="#">Mac</a></li>
                        <li><a href="#">iPad</a></li>
                        <li><a href="#">iPhone</a></li>
                        <li><a href="#">Watch</a></li>
                        <li><a href="#">Music</a></li>
                        <li><a href="#">iTunes</a></li>
                        <li><a href="#">iPod</a></li>
                        <li><a href="#">配件</a></li>
                        <li><a href="#">App Store充值卡</a></li>
                    </ul>    
                </li>
                <li>
                    <p><b>账户</b></p>
                    <ul class="ul_ul">
                        <li><a href="#">Mac</a></li>
                        <li><a href="#">iPad</a></li>
                        <li><a href="#">iPhone</a></li>
                        <li><a href="#">Watch</a></li>
                        <li><a href="#">Music</a></li>
                        <li><a href="#">iTunes</a></li>
                        <li><a href="#">iPod</a></li>
                        <li><a href="#">配件</a></li>
                        <li><a href="#">App Store充值卡</a></li>
                    </ul>    
                </li>
                <li>
                    <p><b>关于Apple</b></p>
                    <ul class="ul_ul">
                        <li><a href="#">Mac</a></li>
                        <li><a href="#">iPad</a></li>
                        <li><a href="#">iPhone</a></li>
                        <li><a href="#">Watch</a></li>
                        <li><a href="#">Music</a></li>
                        <li><a href="#">iTunes</a></li>
                        <li><a href="#">iPod</a></li>
                        <li><a href="#">配件</a></li>
                        <li><a href="#">App Store充值卡</a></li>
                    </ul>    
                </li>
            </ul>
        </div>

        <div class="container" style="padding:10px 0;border-bottom:1px solid #888888;color:#888888">
        更多选购方式：前往 <a href="#">Apple Store 零售店</a>，致电 400-666-8800 或查找在你附近的<a href="#">授权经销商</a>
        </div>

        <div class="container">
            <div class="row" style="padding:5px 0;">
                <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" style="padding:0;color:#888888">
                <b>Copyright © 2017 Apple Inc.</b> 保留所有权利。
                </div>
                <div class="col-lg-4 col-md-10 col-sm-10 col-xs-10">
                    <ul class="end_ul">
                        <li><a href="#">隐私政策</a></li>
                        <li><a href="#">使用条款</a></li>
                        <li><a href="#">销售政策</a></li>
                        <li><a href="#">法律信息</a></li>
                        <li style="border:0;"><a href="#">网站地图</a></li>
                    </ul>
                </div>
                <div class="col-lg-4 col-md-2 col-sm-2 col-xs-2 text-right">
                    <img src="images/china.png" alt="中国">
                    <a href="#">中国</a>
                </div>
            </div>
            <div class="row" style="color:#888888">
                京公安网安备 11010502008968 <a href="#" style="color:#888888">京ICP备10214630</a>
            </div>
        </div>

    </div>
   



<script>
    $(function(){
        var li1=$('.silder_ul1 li');
        var li2=$('.silder_ul2 li');
        var i=0;
        function autoplay(){
        li2.eq(i).find('p').animate({width:'100%'},2500,function(){
            li2.find('p').css('width','0');
            i++;
            if(i>2){
                i=0;
            }
        });
        li1.eq(i).show().siblings().hide();
}
    autoplay();
    setInterval(function(){
    autoplay();
    }, 2500);

    })
    

</script>
</body>
</html>